<template>
  <div class="tab-container">
    <div class="tab-header">
      <div class="header-container">
        <span
          class="header-item"
          v-for="(items, index) of tabsTitle"
          :class="{
            'header-item-active': index === currentIndex,
            'disabled': tagsLoading
          }"
          :key="items.codeValue"
          @click="handleClick(items, index)"
        >
        {{ items.codeName }}
      </span>
      </div>
    </div>
    <div v-if="this.$props.tabsTags.length && isTagWrapper" class="float-main">
      <div class="float-wrapper">
        <span
          slot="tag"
          class="tag-items"
          v-for="(item, index) of tabsTags"
          :key="index"
          closable
          @click="tagHandleClick(item, index)"
        >
          {{ item.codeName }}
        </span>
        <div class="loading" v-if="tagsLoading">
          <Spin />
        </div>
      </div>
    </div>
    <div class="tab-body">
      <CheckboxGroup
        v-model="selectArray"
        @on-change="handleSelect"
        class="checkbox-wrapper"
      >
        <Checkbox
          class="checkbox"
          v-for="(item, index) of checkboxList"
          :key="item.cpDataNo + index"
          :label="item"
          :title="item.cpDataName"
        >
          <span class="checkbox-span">{{ item.cpDataName }}</span>
        </Checkbox>
      </CheckboxGroup>
      <div class="loading" v-if="selectQueryLoading">
        <Spin />
      </div>
      <div class="empty-data" v-if="!checkboxList.length">暂无数据</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "my-tabs",
    props: {
      tabsTitle: {
        type: Array,
        default: [],
      },
      tabsTags: {
        type: Array,
        default: [],
      },
      checkboxList: {
        type: Array,
        default: [],
      },
      isTagWrapper: {
        type: Boolean,
        default: false,
      },
      tagsLoading: {
        type: Boolean,
        default: false,
      },
      selectQueryLoading: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        currentIndex: 0,
        selectArray: [],
      }
    },
    methods: {
      // 一级标题点击切换
      handleClick(items, index) {
        if (index === this.$data.currentIndex) {
          this.$props.isTagWrapper = !this.$props.isTagWrapper;
          return;
        }
        this.selectArray = []
        this.$data.currentIndex = index;
        this.$emit('handleChangeTab', items, index)
      },

      // 二级标签点击
      tagHandleClick(items, index) {
        this.$emit('tagHandleClick', items, index)
      },

      handleSelect() {
        console.log(this.$data.selectArray,"this.$data.selectArray")
        this.$emit('handleSelect', this.$data.selectArray);
      }
    },
  }
</script>

<style scoped lang="scss" type="text/scss">
  .tab-container {
    width: 100%;
    position: relative;

    * {
      user-select: none;
    }
  }

  .float-main {
    position: relative;
    width: 100%;
  }

  .float-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px;
    background: #fff;
    box-shadow: 0 4px 8px -6px rgba(0, 0, 0, 0.15);
  }

  .loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .disabled {
    pointer-events: none;
    cursor: default;
    color: #ccc;
  }

  .empty-data {
    width: 100%;
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #ddd;
  }

  .tab-header {
    display: flex;
    border-bottom: 1px solid #dcdee2;

    .header-container {
      display: flex;
      margin-bottom: -1px;
    }

    .header-item {
      padding: 8px 0;
      margin-right: 20px;
      cursor: pointer;
    }

    .header-item-active {
      border-bottom: 2px solid #1E9FFF;
      color: #1E9FFF;
    }
  }

  .tag-items {
    display: inline-block;
    margin: 4px 12px 4px 0;
    padding: 4px 12px;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 14px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      background: #1E9FFF;
      color: #fff;
    }
  }

  .tab-body {
    width: 100%;
    position: relative;
    padding: 30px 10px 10px;

    .checkbox-wrapper {
      display: flex;
      flex-wrap: wrap;
    }

    .checkbox {
      flex: 0 0 229px;
      height: 36px;
      margin-right: 40px;
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 0;

      &:nth-child(4n) {
        margin-right: 0;
      }

      .checkbox-span {
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 16px;
        margin-left: 4px;
        margin-right: 0;
      }
    }
  }

  .slide-fade-enter-active {
    transition: opacity .2s linear;
  }

  .slide-fade-leave-active {
    transition: opacity .2s linear;
  }

  .slide-fade-enter, .slide-fade-leave-to {
    opacity: 0;
  }
</style>